<template>
  <div>
<todo-header :todosm="list"  @on-keyup ="KeyUpFn"/>
<todo-main :todos="list" @on-del = "delFn"/>
<todo-footer/>
  </div>
</template>

<script>
import TodoFooter from './components/todoFooter.vue'
import todoHeader from './components/todoHeader.vue'
import TodoMain from './components/todoMain.vue'
import axios from 'axios'
axios.defaults.baseURL = 'http://liufusong.top:3001'
export default {
  components: { todoHeader, TodoMain, TodoFooter },
  data () {
    return {

      list: []
    }
  },

  created () {
    this.getData()
  },

  methods: {
    async getData () {
      try {
        const res = await axios({
          url: '/list'
        })
        this.list = res.data
        // console.log(this.list)
        // console.log(res)
      } catch (err) {
        alert('请求失败')
      }
    },
    // 添加
    async KeyUpFn (e) {
      // console.log(e)
      try {
        const result = await axios({
          url: '/add',
          method: 'POST',
          data: { title: e }

        })
        this.getData()
        console.log(result)
      } catch (err) {
        alert('请求失败')
      }
    },
    // 删除
    async delFn (e) {
      // console.log(e)
      try {
        const result = await axios({
          url: 'list/' + e,
          method: 'DELETE'
        })
        this.getData()
        console.log(result)
      } catch (err) {
        alert('请求失败')
      }
    }

  }
}
</script>

<style scoped lang='less'>

</style>
